/* eslint-disable react/jsx-pascal-case */
/* eslint-disable jsx-a11y/alt-text */
import React from 'react'

// 引入城市数据
import { areaList } from '@vant/area-data';

import '@/assets/css/UserProfile.less'

const Profile = () => {
    // 实例化路由跳转
    let navigate = React.$router.useNavigate()
    // 获取cookie
    const LoginUser = React.$cookie.load('LoginUser') ? React.$cookie.load('LoginUser') : {}
    // 实例化表单
    const [form] = React.$vant.Form.useForm()
    // 创建一个初始的变量
    const [show, setShow] = React.useState(false)

    let code = []
    // 追加省市区code
    if (LoginUser.province) {
        code.push(LoginUser.province.toString())
    }
    if (LoginUser.city) {
        code.push(LoginUser.city.toString())

    }
    if (LoginUser.district) {
        code.push(LoginUser.district.toString())
    }
    // 创建一个地区初始变量
    const [region, setRegion] = React.useState({
        code: code,
        region_text: LoginUser.region_text
    })

    let avatar = []
    // 将头像封装到avatar
    if (LoginUser.avatar) {
        avatar.push({
            url: LoginUser.avatar
        })
    }

    let cover = []
    // 将背景封装到cover
    if (LoginUser.cover) {
        cover.push({
            url: LoginUser.cover
        })
    }
    const onProfile = async (values) => {
        let data = {
            userid: LoginUser.id,
            nickname: values.nickname,
            sex: values.sex,
            content: values.content
        }

        if (values.password) {
            data.password = values.password
        }
        let district = region.code['2']
        if (district) {
            data.code = district
        }

        let AvatarFile = values.avatar[0].file ? values.avatar[0].file : ''

        if (AvatarFile) {
            data.avatar = AvatarFile
        }

        let CoverFile = values.cover[0].file ? values.cover[0].file : ''

        if (CoverFile) {
            data.cover = CoverFile
        }
        let result = await React.$api.profile(data)

        if (result.code === 1) {
            React.$vant.Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    React.$cookie.save('LoginUser', result.data, { path: '/' })
                    navigate('/user/base/profile')
                }
            })
        } else {
            React.$vant.Notify.show({
                type: 'warning',
                message: result.msg
            })
        }
    }
    // 地区选择
    const SelectRegion = (_, values) => {
        // 关闭下拉选择
        setShow(false)
        // 定义省市区名称
        let region_text = ''
        // 定义省市区code
        let code = []
        // 将选择的值分割成数组
        let [province, city, district] = values

        if (province) {
            region_text += province.text + '-'
            code.push(province.value)
        }
        if (city) {
            region_text += city.text + '-'
            code.push(city.value)
        }
        if (district) {
            region_text += district.text
            code.push(district.value)
        }

        setRegion({ code: code, region_text: region_text })
    }
    // 底部
    const Footer = () => {
        return (
            <>
                <div className="action">
                    <button className="btn">提交</button>
                </div>
            </>
        )
    }
    // 返回
    const onBack = () => {
        navigate('/user/base/index')
    }
    return (
        <>
            <React.$vant.NavBar
                title="修改基本资料"
                leftText="返回"
                onClickLeft={onBack}
            />
            {/* 头像 */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={JSON.stringify(LoginUser) !== '{}' ? LoginUser.avatar : '/assets/images/avatar.png'} />
                </div>
            </div>
            {/* 表单 */}
            <React.$vant.Form
                className="profile wow fadeInUp"
                data-wow-delay="200ms"
                form={form}
                onFinish={onProfile}
                footer={<Footer />}
            >
                {/* 邮箱 */}
                <React.$vant.Form.Item
                    name='email'
                    label='邮箱'
                    labelWidth='2.5em'
                    initialValue={LoginUser.email}
                >
                    <React.$vant.Input readOnly />
                </React.$vant.Form.Item>
                {/* 昵称 */}
                <React.$vant.Form.Item
                    name='nickname'
                    label='昵称'
                    labelWidth='2.5em'
                    initialValue={LoginUser.nickname?LoginUser.nickname:''}
                >
                    <React.$vant.Input placeholder='请输入昵称' />
                </React.$vant.Form.Item>
                {/* 密码 */}
                <React.$vant.Form.Item
                    name='password'
                    label='密码'
                    labelWidth='2.5em'
                >
                    <React.$vant.Input placeholder='请输入密码' />
                </React.$vant.Form.Item>
                {/* 性别 */}
                <React.$vant.Form.Item
                    name='sex' label='性别'
                    labelWidth='2.5em'
                    initialValue={LoginUser.sex}
                >
                    <React.$vant.Radio.Group direction='horizontal'>
                        <React.$vant.Radio name='0'>保密</React.$vant.Radio>
                        <React.$vant.Radio name='1'>男</React.$vant.Radio>
                        <React.$vant.Radio name='2'>女</React.$vant.Radio>
                    </React.$vant.Radio.Group>
                </React.$vant.Form.Item>

                {/* 城市地区 */}
                <React.$vant.Form.Item
                    label="地区"
                    onClick={() => setShow(true)}
                    initialValue={[LoginUser.province, LoginUser.city, LoginUser.district]}
                    labelWidth='2.5em'
                    isLink
                >
                    {region.region_text ? region.region_text : '请选择地区'}
                </React.$vant.Form.Item>
                {/* 头像 */}
                <React.$vant.Form.Item
                    name='avatar'
                    label='头像'
                    labelWidth='2.5em'
                    initialValue={avatar}
                >
                    <React.$vant.Uploader maxCount='1' />
                </React.$vant.Form.Item>
                {/* 封面 */}
                <React.$vant.Form.Item
                    name='cover'
                    label='背景'
                    labelWidth='2.5em'
                    initialValue={cover}
                >
                    <React.$vant.Uploader maxCount='1' />
                </React.$vant.Form.Item>
                {/* 简介 */}
                <React.$vant.Form.Item
                    initialValue={LoginUser.content?LoginUser.content:''}
                    name='content'
                    label='简介'
                    labelWidth='2.5em'
                >
                    <React.$vant.Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
                </React.$vant.Form.Item>
            </React.$vant.Form>
            {/* 地区下拉选择框 */}
            <React.$vant.Popup
                position="bottom"
                visible={show}
                onClose={() => { setShow(false) }}
            >
                <React.$vant.Area
                    title="选择地区"
                    value={region.code}
                    areaList={areaList}
                    initialValue={[LoginUser.region]}
                    onConfirm={SelectRegion}
                    onCancel={() => setShow(false)}
                />
            </React.$vant.Popup>
        </>
    )
}

export default Profile